/* mixin
----------------------------------------------------------------*/
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin container($containerWidth) {
  width: $containerWidth;
  margin-right: auto;
  margin-left: auto;
}

// 列表表格样式
@mixin list($color) {
  .date-range {
    .el-date-editor {
      width: 100%;
      .el-range-separator {
        width: 6%;
      }
    }
  }
  .list-container {
    .el-form {
      .el-form-item {
        margin-top: 10px;
        margin-bottom: 0 !important;
        button {
          margin-bottom: 0 !important;
        }
      }
    }
    .el-button--primary {
      margin-right: 0;
      margin-bottom: 10px;
    }
    .table-title {
      font-size: 16px;
      font-weight: bold;
    }
    .button-container {
      width: 100%;
      text-align: left;
      height: 42px;
      margin: 10px 0;
      border-bottom: 1px solid $color;
    }
    .search-container {
      padding-top: 10px;
      padding-bottom: 10px;
      // 解决el-form高度不同问题
      .el-col .el-form-item .el-form-item__content {
        display: flex;
      }
      .el-col.fr .el-form-item .el-form-item__content {
        float: right;
      }
      .el-col .el-form-item--small .el-form-item__content{
        min-height: 32px;
      }
    }
    .search-button-container {
      text-align: right;
      width: 100%;
    }
    .table-container {
      .table-link.el-link {
        &:not(:last-child)::after {
          content: '|';
          margin-left: 5px;
          margin-right: 5px;
        }
      }
      .header-cell-class {
        background-color: #F4F8FB;
        font-size: 14px;
        color: #606266;
      }
      .fixed-border {
        .el-table .el-table__fixed-right {
          box-shadow: 0 -6px 10px rgba(0, 0, 0, 0.12);
          &::before {
            height: 0 !important;
          }
        }
      }
      .el-table {
        .el-table__body-wrapper, .el-table__fixed-body-wrapper {
          .el-table__body {
            width: 100%;
            table-layout: fixed!important;
          }
          .el-tooltip .el-link {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            display: block;
          }
          td {
            padding: 9px 0;
          }
          .show-text {
            cursor: pointer;
            color: $main-color;
            font-weight: 500;
          }
        }
        .el-table__header-wrapper, .el-table__fixed-header-wrapper {
          .el-table__header {
            table-layout: fixed!important;
          }
          th {
            background: $table-head-bg;
            color: $table-th-color;
            font-weight: $table-th-font-weight;
            font-size: $table-th-font-size;
            padding: 6px 0;
          }
        }
      }
      .el-pagination {
        margin-top: 6px;
        text-align: right;
        .el-pager li {
          line-height: 26px;
          background: #fff;
          border: 1px solid #EDEEEF;
        }
        .el-pagination .el-select .el-input .el-input__inner {
          padding-right: 0;
        }
        .btn-prev:not(:disabled) {
          background: #fff;
          border: 1px solid #EDEEEF;
        }
        .btn-next:not(:disabled) {
          background: #fff;
          border: 1px solid #EDEEEF;
        }
        .el-pagination__jump {
          margin-left: 0px;
        }
        .el-pager li:not(.disabled).active {
          background: $color;
        }
      }
      .vxe-table {
        .vxe-body--column:not(.col--ellipsis),.vxe-footer--column:not(.col--ellipsis),.vxe-header--column:not(.col--ellipsis) {
          padding: 9px 0;
        }
      }
    }
  }
}

@mixin dialog() {
  .pj-dialog {
    .el-dialog__header {
      text-align: center;
      padding: 15px;
      border-bottom: 2px dashed #eee;
      .el-dialog__title {
        font-size: 20px;
      }
    }
    .el-dialog__body {
      padding: 20px;
      .el-form .el-form-item {
        margin-bottom: 18px !important;
      }
    }
    .dialog-footer {
      margin-top: 15px;
      @include clearfix;
      &.right {
        button {
          float: right;
          margin-left: 10px;
        }
      }
      &.left {
        button {
          float: left;
          margin-right: 10px;
        }
      }
    }
    .search-box {
      margin: 15px 0;
      .el-form-item {
        margin-bottom: 10px;
      }
    }
  }
}


@mixin footer {
  position: fixed;
  z-index: 302;
  bottom: 0;
  left: 0;
  padding-top: 1px;
  zoom: 1;
  margin: 0;
  width: 100%;
  margin-top: 12px;
  text-align: center;
  font-size: $font-size-small;
  color: $white;
  a {
    color: $white;
  }
}
